<template>
  <view class="cart">
    <!-- 1 购物车列表 -->
    <!-- <u-swipe-action v-for="(goods,index) in cartList" :key="goods.goods_id" :options="options" @click="delGoods(index)"> -->
    <u-swipe-action
      v-for="(goods, index) in cartList"
      :key="goods.goods_id"
      :index="index"
      :show="index === current"
      :options="options"
      @click="delGoods"
      @open="open"
    >
      <view class="cart-list">
        <view class="cart-item">
          <!-- 复选框 -->
          <view class="chk">
            <u-checkbox
              @change="handleSingleCheck(index)"
              class="checkbox"
              :value="goods.checked"
              active-color="red"
              shape="circle"
            ></u-checkbox>
            <!-- <checkbox :checked="goods.checked"></checkbox> -->
          </view>
          <!-- 图片 -->
          <navigator
            :url="'/pages/goods_detail/goods_detail?goods_id=' + goods.goods_id"
            class="cart-img"
          >
            <u-image
              width="190rpx"
              height="190rpx"
              :src="goods.goods_small_logo"
            ></u-image>
          </navigator>
          <!-- 商品信息 -->
          <view class="cart-info">
            <navigator
              :url="
                '/pages/goods_detail/goods_detail?goods_id=' + goods.goods_id
              "
              class="goods-name u-line-2"
              >{{ goods.goods_name }}</navigator
            >
            <view class="goods-tool">
              <view class="goods-price">￥{{ goods.goods_price }}</view>
              <view class="goods-num-change">
                <view class="num-btn" @click="handleGoodsNum(index, -1)"
                  >-</view
                >
                <view class="num-value">{{ goods.num }}</view>
                <view class="num-btn" @click="handleGoodsNum(index, 1)">+</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-swipe-action>

    <!-- 2 统计栏结构 -->
    <view class="statistics">
      <view class="allCheck">
        <u-checkbox
          @change="handleAllCheck"
          class="checkbox"
          :value="isAllCheck"
          active-color="red"
          shape="circle"
        >
          <text>全选</text></u-checkbox
        >
      </view>
      <view class="cartSum">
        合计: <text class="rmb">￥</text
        ><text class="num">{{ totalPrice }}</text>
      </view>
      <view>
        <u-button
          @click="toPay"
          shape="circle"
          size="mini"
          active-color="red"
          :custom-style="{ backgroundColor: '#EA4350', color: '#fff' }"
          >去结算({{ totalNum }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      current: "",
    };
  },
  computed: {
    ...mapState(["cartList"]),
    ...mapGetters(["isAllCheck", "totalPrice", "totalNum"]),
    //  是否全选isAllCheck
    // 总价totalPrice

    // 总数totalNum
  },
  methods: {
    //跳转到支付页
    toPay() {
      if (this.totalNum) {
        // console.log("跳转到支付页")
        uni.navigateTo({
          url: "/pages/pay/pay",
        });
      } else {
        uni.showToast({
          title: "请先选择商品!",
          icon: "none",
        });
      }
    },

    open(index) {
      // console.log(index)
      // 只显示当前的左滑菜单
      this.current = index;
    },

    //左滑删除
    async delGoods(index, index1) {
      // index:数组下标
      // index1:操作列表options的下标
      // console.log(index)
      const cartList = [...this.cartList];
      let [err, res] = await uni.showModal({
        title: "请问是否删除该商品!!",
        // content: '',
      });
      // console.log(res.confirm)
      if (res.confirm) {
        cartList.splice(index, 1);
      }
      this.current = "";

      this.$store.commit("setCartList", cartList);
    },

    // 设置商品数量
    async handleGoodsNum(index, unit) {
      // console.log(index,unit)
      const cartList = [...this.cartList];
      if (cartList[index].num === 1 && unit === -1) {
        let [err, res] = await uni.showModal({
          title: "请问是否删除该商品!!",
          // content: '',
        });
        // console.log(res.confirm)
        if (res.confirm) {
          cartList.splice(index, 1);
        }
      } else {
        cartList[index].num += unit;
      }

      this.$store.commit("setCartList", cartList);
    },
    // 设置单选
    handleSingleCheck(index) {
      // console.log(index)
      const cartList = [...this.cartList];
      cartList[index].checked = !cartList[index].checked;
      this.$store.commit("setCartList", cartList);
    },
    // 设置全选/全部选
    handleAllCheck() {
      const isAllCheck = !this.isAllCheck;
      // console.log(isAllCheck)
      const cartList = [...this.cartList];
      cartList.forEach((item) => {
        item.checked = isAllCheck;
      });

      this.$store.commit("setCartList", cartList);
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    .cart-item {
      padding: 20rpx;
      display: flex;

      .chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .checkbox {
        }
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cart-info {
        flex: 3;
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .u-line-2 {
        }

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $theme-color;
          }

          .goods-num-change {
            display: flex;
            color: #666;
            .num-btn {
              width: 36rpx;
              height: 36rpx;
              border: 1rpx solid #666;
              border-radius: 50%;

              display: flex;
              align-items: center;
              justify-content: center;
            }

            .num-value {
              margin: 0 20rpx;
            }
          }
        }
      }
    }
  }
}
.statistics {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 83rpx;
  width: 100%;
  padding: 0 23rpx;
  border-top: 1rpx solid #ccc;
  background-color: #fff;
  .allCheck {
    .checkbox {
      text {
        color: #8a8a8a;
        font-size: 21rpx;
      }
    }
  }

  .cartSum {
    flex: 1;
    margin-left: 30rpx;
    .rmb {
      font-size: 24rpx;
      margin-left: 10rpx;
      color: $theme-color;
    }

    .num {
      color: $theme-color;
    }
  }
}
</style>